<template>
<div>
  <div class="wrap">
    <div class="top">
      <el-carousel :interval="5000" :arrow="lunboList.length > 1 ? 'always' : 'never'" :height="`${bannerHeight}px`" :indicator-position="lunboList.length > 1 ? '' : 'none'">
        <el-carousel-item v-for="(item, index) in lunboList" :key="index">
          <router-link :to="item.route">
            <img class="banner" :src="item.url" alt="">
          </router-link>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="separate" v-for="(item,index) in descHelper" :key="index">
        <img v-if="item.isImgLeft" :src="imgPath+item.img" alt="">
        <div class="content">
          <span class="position" v-if="index === 0">活动介绍-三大核心优势</span>
          <span class="title">{{item.title}}</span>
          <span class="word">{{item.content}}</span>
        </div>
        <img v-if="!item.isImgLeft" :src="imgPath+item.img" alt="">
    </div>
    <div class="activity">
      <img :src="backImg" alt="">
    </div>
    <Footer/>
  </div>
</div>
</template>

<script>
import mixins from '../../components/onResize/mixin'
import { homePageBanners } from '@/api/marketShop'
import Footer from './components/footer'
export default {
  mixins: [mixins],
  data() {
    return {
      lunboList: [], // 轮播图
      backImg: '',
      bannerHeight: 400,
      backHeight: 690,
      imgPath: `${this.$ossUrl}showPage/day-home/`,
      descHelper:[
        {
          title:'千万级用户体量',
          content:`团油拥有千万级活跃车主，为天天特价活动提供充足消费保障，为您的油站销量加油助力。`,
          img:'day-introduce.png',
          isImgLeft: false,
        },
        {
          title:'油站专属券',
          content: `锁客复购，参与活动的用户完成当笔订单后，系统默认为用户推送油站专属优惠券，让用户再次来到站内加油。`,
          img:'day-oilCoupon.png',
          isImgLeft: true,
        },
        {
          title:'油站置顶',
          content:`强曝光+强引流，活动期间可根据您的需求选择是否需要油站置顶，通过一定范围内的置顶来更好的宣传活动。`,
          img:'day-up.png',
          isImgLeft: false,
        },
      ]
    }
  },
  components: {
    Footer
  },
  mounted () {
    this.homePageBannersApi()
  },
  methods: {
    setSize () {
      // 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = 400 / 1920 * this.screenWidth
      this.backHeight = 690 / 1920 * this.screenWidth
    },
    async homePageBannersApi() {
      try {
        const { code, result = [] } = await homePageBanners()
        if (code !== 200) return
        this.lunboList = result.bottoms
        this.backImg = result.bottomImageUrl
      } catch(err) {
        console.log(err)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.wrap{
  background: #fff;
}
.top {
  width: 100%;
  margin-top: 20px;
  .banner{
    display: block;
    width: 100%;
    height: 100%;
  }
}
.separate{
      width: 100%;
      padding: 30px 180px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      >img{
        display: block;
        width: 360px;
        height: 320px;
      }
      .content{
        width: 421px;
        height: 200px;
        padding: 10px 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        .position {
          width: 296px;
          height: 48px;
          background: linear-gradient(270deg, #FEECD0 0%, #F2C694 100%);
          border-radius: 29px;
          font-size: 24px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #A14900;
          text-align: center;
          line-height: 48px;
        }
        .title{
          font-size: 20px;
          font-weight: bold;
          color: #333333;
        }
        .word{
          font-size: 18px;
          color: #000;
        }
      }
    }
.activity{
  width: 100%;
  background-size: 100% 100%;
  >img {
    width: 100%;
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
/deep/.el-carousel__button{
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
/deep/.el-carousel__arrow {
  z-index: 5;
}
</style>